<template>
  <div>
    <el-dialog title="客户跟进" :visible.sync="dialogVisible" width="80%" center>


      <div class="e-flex e-row-between">
        <div style="width: 30%;">
          <div class="e-flex">
            <h3 class="e-m-b-20">客户信息 </h3>
            <span @click="open" class="e-m-l-10 " style="color: #409EFF;cursor: pointer;">详细</span>
          </div>
          <el-form ref="form" label-width="80px">
            <el-form-item label="跟进人">
              <el-select @change="Cinput('staff_id',info.staffId)" filterable v-model="info.staffId"
                placeholder="请选择跟进人">
                <el-option v-for="(item,index) in stafft" :key="index" :label="item.realname" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="客户姓名">
              <el-input @change="Cinput('realname',$event)" placeholder="请输入内容" v-model="info.realname">
              </el-input>
            </el-form-item>


            <el-form-item label="公司名称">
              <el-input @change="Cinput('company',$event)" placeholder="请输入内容" v-model="info.company">
              </el-input>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input @change="Cinput('phone',$event)" placeholder="请输入内容" v-model="info.phone">
              </el-input>
            </el-form-item>

            <el-form-item label="项目类型">
              <div>
                <el-select @change="Cinput('type',info.type)" v-model="info.type" slot="prepend"
                  :placeholder="info.type">
                  <el-option v-for="(item,index) in type" :key="index" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

            <el-form-item label="当前状态">
              <el-rate @change="Cinput('star',$event)" v-model="info.star" text-color="#ff9900">
              </el-rate>
            </el-form-item>

            <el-form-item label="客户需求">
              <el-input @change="Cinput('demand',$event)" type="textarea" v-model="info.demand"></el-input>
            </el-form-item>
          </el-form>

        </div>
        <div style="width:65%;">
          <h3 class="e-m-b-20">详细</h3>
          <div style="border: 1px solid #e1e1e1;border-bottom: 0;">
            <div  v-for="(item,index) in flow" :key="index" style="border-bottom: 1px solid #e1e1e1;padding: 20px;">
              <div class=" e-flex e-row-between">
                <div class="e-flex ">
                  <div class="e-color-i-1" >
                    {{item.createTime}}
                  </div>
                  <div class="e-m-l-10 e-flex e-color-i-1">
                    星级:<el-rate disabled v-model="item.star" text-color="#ff9900"> </el-rate>
                  </div>
                </div>
                <div  :class="item.red?'e-color-d-1':'e-color-i-1'">
                  跟进人: {{item.staffName}}
                </div>
              </div>
              <div class="e-font-bold" style="margin-top: 10px;" :class="item.red?'e-color-d-1':''">{{item.remark}}</div>
            </div>

            <el-empty description="暂无跟进" v-if='!flow.length' :image-size='100'></el-empty>

            <div class="e-flex e-p-20  e-row-between" style="background: #85a2ff;color: #fff;">
              <div class="e-flex">
                <h3 class="e-m-r-20">本次评价</h3>
                <el-rate v-model="star" text-color="#ff9900"> </el-rate>
              </div>
              <div>
                <el-switch v-model="red" active-text="此消息标记" active-color='#e50000' >
                </el-switch>
              </div>
            </div>

            <el-input type="textarea" v-model="remark"></el-input>


          </div>

          <div class="e-row-right e-flex">
            <el-button @click="submit" type="primary" class="e-m-t-10 " :loading="btnloading">提交</el-button>
          </div>
        </div>

      </div>







    </el-dialog>
  </div>
</template>

<script>
  import {
    typeArry,
    statusArry,
    timeArry,

  } from '@/common/arry.js';

  import {
    Message
  } from 'element-ui';
  export default {
    data() {
      return {
        dialogVisible: false,
        id: '',
        flow: [],
        star: 0,
        red: 0,
        remark: '',
        info: '',
        type: JSON.parse(JSON.stringify(typeArry)),
        btnloading: false,
        stafft: []
      }
    },
    created() {

      this.getStafft()
    },
    methods: {
      getStafft() {
        this.axios.post("/user/belongTo", {

        }).then(res => {
          this.stafft = res.genjin;
        }).catch(error => {

        })
      },
      open(id) {
        this.axios.post("/user/clientDetail", {
          id: this.id
        }).then(res => {
          this.$parent.$refs.userChild.dialogVisible = true;
          this.$parent.$refs.userChild.echo(res)
        }).catch(error => {

        })
      },


      Cinput(txt, e) {

        this.axios.post("/user/clientChange", {
          id: this.id,
          field: txt,
          value: e,
        }).then(res => {

        }).catch(error => {

        })
      },
      echo(id) {
        this.axios.post("/user/clientDetail", {
          id: id
        }).then(res => {
          this.info = res;
        }).catch(error => {

        })
      },
      jiazai(id) {
        this.axios.post("/user/followList", {
          id: id
        }).then(res => {
          this.flow = res;
          
          this.id = id
        }).catch(error => {

        })
      },
      submit() {
        this.axios.post("/user/follow", {
          remark: this.remark,
          star: this.star,
          id: this.id,
          red:this.red
        }).then(res => {
          this.btnloading = true;
          Message.success({
            message: "成功",
            onClose: (res) => {
              this.btnloading = false;
              this.jiazai(this.id)
              // this.dialogVisible = false;
              this.remark = '';
              this.red=0,
              this.star = 0;
              // this.$emit('update');
            }
          })
        }).catch(error => {
          this.btnloading = false;
        })

      }
    }
  }
</script>

<style>

</style>

<style scoped>
  /deep/ .el-textarea__inner {
    height: 200px;
    background: #f1f1f1;
    border: 0;
  }


  /deep/  .el-switch__label.is-active{
      color: #e50000;
  }
  /deep/ .el-switch__label{
      color: #fff;
  }


</style>
